<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    [v-cloak]{
      display: none;
    }
  </style>
</head>
<body>
  <div id="app" v-cloak>
    <select name="省" id="province" @change="province()">
      <option v-for="province in province" 
      :key="province.ID"
      :value="province.TopID"
      >{{province.AddName}}</option>
    </select>
    <select name="市" id="city">
      <option v-for="city in cities" 
      :key="city.ID"
      >{{city.AddName}}</option>
    </select>
    <select name="县" id="county">
      <option v-for="county in counties" 
      :key="county.ID"
      >{{county.AddName}}</option>
    </select>
  </div>
</body>
</html>
<script src="./address.js"></script>
<script src="../packages/vue.js"></script>
<script>
  function getAddress(data) {
  // 过滤出所有的省级单位
  const result = data.filter(d => d.TopID === 0);

  result.forEach(province => {
    province.child = [];
    
    data.forEach(city => {
      if (province.ID === city.TopID) {
        // 让各省 获取 对应的 市级单位
        province.child.push(city);


        // 让各市 获取 对应的 县级单位
        city.child = [];
        data.forEach(county => {
          if (city.ID === county.TopID) {
            city.child.push(county);
          }
        })
      }

    })    
  })
  return result;
}

const result = getAddress(address);
// console.log(result);


  const vm = new Vue({
    el:'#app',
    data(){
      return {
        province:result,
        cities:result[0].child,
        counties:result[0].child[0].child
      }
    },
    methods:{
      province(){
        if(province.TopID == city.ID){
          return 
        }
      }
    }
  })
</script>